<style>
  #baseflow-add {
    padding: 20px 25px 25px 0;
  }
  #type-selector {
    display: none;
  }
  #type {
    width: 95%;
    transition: all 0.5s;
  }
  .btn-add,
  .btn-cencel {
    margin: 0px 0 0 10px;
  }

  .add-type {
    display: none;
  }
  .type-id {
    position: relative;
  }
  .type-id-alert {
    position: absolute;
    display: block;
  }
</style>
<div class="layui-fluid" id="baseflow-add">
  <form class="layui-form" action="" lay-filter="baseflow-add-form">
    <div class="layui-form-item">
      <label class="layui-form-label febs-form-item-require">组织机构：</label>
      <div class="layui-input-block">
        <select name="orgId" lay-filter="orgIdSelect">
          <option value=""></option>
          <option value=""></option>
          <option value="1201">1201-站成AD厂</option>
          <option value="9001">9001-AD开发中心</option>
          <option value="9002">9002-NB开发中心</option>
          <option value="1350">1350-安乡站成底厂</option>
          <option value="9003">9003-迪桑特开发中心</option>
          <option value="6200">6200-东莞站瑞底厂</option>
          <option value="1600">1600-安乡大旺</option>
          <option value="1700">1700-阳新龙行天下</option>
          <option value="2300">2300-越南富存</option>
          <option value="2400">2400-越南大可</option>
          <option value="1500">1500-龙行天下（二厂）</option>
          <option value="1301">1301-湖南NB厂</option>
          <option value="8100">8100-站佳事业部</option>
          <option value="9000">9000-东莞站成研创</option>
          <option value="1100">1100-东莞站成一厂</option>
          <option value="1200">1200-东莞站成二厂</option>
          <option value="1300">1300-湖南一厂</option>
          <option value="1400">1400-钟祥鞋厂</option>
          <option value="2100">2100-越南一厂</option>
          <option value="2200">2200-越南二厂</option>
          <option value="6100">6100-湖南站成底厂</option>
          <option value="5100">5100-东莞喜悦鞋材</option>
          <option value="6400">6400-钟祥底厂</option>
          <option value="2600">2600-龙行天耀</option>
          <option value="7100">7100-原力3D</option>
          <option value="7200">7200-杰富亿</option>
          <option value="1501">1501-常德站成</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label febs-form-item-require">单据分类：</label>
      <div class="layui-input-block" id="billStdNo"></div>
    </div>
    <div class="layui-form-item" id="dept-selector">
      <label class="layui-form-label febs-form-item-require">部门：</label>
      <div class="layui-input-block" id="dept"></div>
    </div>
    <div class="layui-form-item" id="type-selector">
      <label class="layui-form-label febs-form-item-require">类别：</label>
      <div class="layui-input-block" style="display: flex">
        <div id="type"></div>
        <button class="layui-btn layui-btn-normal btn-add" type="button">新增</button>
      </div>
    </div>
    <div class="layui-form-item add-type">
      <div class="layui-form-item type-margin">
        <label class="layui-form-label febs-form-item-require">类别ID：</label>
        <div class="layui-input-block type-id">
          <input type="text" name="billstdG" minlength="2" maxlength="60" autocomplete="off" class="layui-input type-id-input" />
          <div class="type-id-alert"></div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label febs-form-item-require">类别名称：</label>
        <div class="layui-input-block">
          <input type="text" name="deptName" minlength="2" maxlength="60" autocomplete="off" class="layui-input type-name-input" />
        </div>
      </div>
      <button class="layui-btn layui-btn-danger btn-cencel" minlength="2" maxlength="60" type="button">取消</button>
    </div>

    <!--        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">流程编号：</label>
            <div class="layui-input-block">
                <input type="text" name="basestdNo" minlength="2" maxlength="6" lay-verify="range|basestdNo"
                       autocomplete="off" class="layui-input">
            </div>
        </div>-->
    <div class="layui-form-item">
      <label class="layui-form-label febs-form-item-require">流程名称：</label>
      <div class="layui-input-block">
        <input type="text" name="nameT" minlength="2" maxlength="60" autocomplete="off" class="layui-input" />
      </div>
    </div>

    <!-- <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">备注：</label>
      <div class="layui-input-block">
        <textarea name="" maxlength="100" class="layui-textarea" readonly="readonly"> </textarea>
      </div>
    </div> -->
    <div class="layui-form-item febs-hide">
      <button class="layui-btn" lay-submit="" lay-filter="baseflow-add-form-submit" id="submit"></button>
      <button type="reset" class="layui-btn" id="reset"></button>
    </div>
  </form>
</div>

<script>
  layui.use(["febs", "form", "validate", "xmSelect"], function () {
    let $ = layui.$,
      febs = layui.febs,
      layer = layui.layer,
      form = layui.form,
      xmSelect = layui.xmSelect,
      validate = layui.validate,
      addFlag = false,
      orgId = null,
      billStdNo = null,
      deptXmlSelect,
      billStdNoSelect;

    form.verify(validate);
    form.render();
    deptXmlSelect = xmSelect.render({
      el: "#dept",
      model: { label: { type: "text" } },
      direction: "down",
      clickClose: true,
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "deptname",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "deptName",
        value: "deptName",
      },
      height: "auto",
      on: function (data) {
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });
    billStdNoSelect = xmSelect.render({
      el: "#billStdNo",
      model: { label: { type: "text" } },
      template({ name, value }) {
        return value + "-" + name;
      },
      direction: "down",
      clickClose: true,
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "billstdNo",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "billstdNm",
        value: "billstdNo",
      },
      height: "auto",
      on: function (data) {
        //隐藏新增功能
        $(".add-type").css("display", "none");
        $(".btn-add").css("display", "block");
        $(".type-id-input").eq(0).val("");
        $(".type-name-input").eq(0).val("");
        $(".type-id-alert").text("");
        typeNoSelect.update({ disabled: false });
        //显示部门，隐藏类型
        billStdNo = data.change[0].billstdNo;
        if (data.change[0].billstdNo == "DESTORY" || data.change[0].billstdNo == "DESTORY_Y") {
          $("#dept-selector").css("display", "block");
          $("#type-selector").css("display", "none");
          //非初始化时，更改类别根据类别渲染
          if (orgId != null) {
            febs.get(ctx + "baseflow/getNames?orgId=" + orgId, null, function (data) {
              deptXmlSelect.update(data);
            });
          }
        } else {
          //隐藏部门,显示类型
          billStdNo = data.change[0].billstdNo;
          $("#dept-selector").css("display", "none");
          $("#type-selector").css("display", "block");
          if (orgId != null) {
            febs.get(ctx + "baseflow/getBillList?orgId=" + orgId + "&billstdNo=" + billStdNo, null, function (data) {
              typeNoSelect.update(data);
            });
          }
        }
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });
    typeNoSelect = xmSelect.render({
      el: "#type",
      model: { label: { type: "text" } },
      direction: "down",
      clickClose: true,
      template({ name, value }) {
        return value + "-" + name;
      },
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "billStdG",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "billstdgNm",
        value: "billstdG",
      },
      height: "auto",
      on: function (data) {
        if (data.isAdd) {
          console.log(data.change.slice(0, 1));
          return data.change.slice(0, 1);
        }
      },
    });
    febs.get(ctx + "baseflow/getList", null, function (data) {
      billStdNoSelect.update(data);
    });
    form.on("submit(baseflow-add-form-submit)", function (data) {
      //整合统一字段post
      let FormData = data;

      if (FormData.field.orgId == "") {
        febs.alert.error("请选择机构");
        return false;
      }
      if (FormData.field.billstdNo == "") {
        febs.alert.error("请选择单据分类");
        return false;
      }

      if (FormData.field.nameT == "") {
        febs.alert.error("请填写流程名称");
        return false;
      }
      if (FormData.field.billstdNo == "DESTORY" || FormData.field.billstdNo == "DESTORY_Y") {
        //当类型为DESTORY和DESTORY_Y
        if (FormData.field.deptname == "") {
          febs.alert.error("请选择部门");
          return false;
        }
        FormData.field.deptName = FormData.field.deptname;
        delete data.field.deptname;
        delete data.field.billStdG;
        //提交
        febs.post(ctx + "baseflow/add", FormData.field, function () {
          layer.closeAll();
          febs.alert.success("新增流程成功");
          $("#febs-baseflow").find("#queryBaseFlow").click();
        });
      } else {
        //类型为其他时
        if (addFlag) {
          //新增类别
          if (FormData.field.billstdG != "") {
            //类别Id判空
            febs.get(
              ctx +
                "baseflow/checkBill?orgId=" +
                FormData.field.orgId +
                "&billstdNo=" +
                FormData.field.billstdNo +
                "&basestdNo=" +
                FormData.field.billstdG,
              null,
              (res) => {
                //类别Id判重复

                switch (res.data) {
                  case 1:
                    //类别Id不重复类别名称判空
                    if (FormData.field.deptName == "") {
                      febs.alert.error("请输入类别名称");
                      return false;
                    }
                    delete FormData.field.deptname;
                    delete FormData.field.billStdG;
                    //提交
                    febs.post(ctx + "baseflow/add", FormData.field, function () {
                      layer.closeAll();
                      febs.alert.success("新增流程成功");
                      $("#febs-baseflow").find("#queryBaseFlow").click();
                    });
                    break;
                  case 0:
                    //子类Id重复
                    febs.alert.error("类别Id已存在");
                    break;
                }
              }
            );
          } else {
            //新增类别Id为空
            febs.alert.error("请输入类别Id");
            return false;
          }
        } else {
          //使用已存在类别
          //选择类别判空
          if (FormData.field.billStdG == "") {
            febs.alert.error("请选择类别");
            return false;
          }
          FormData.field.billstdG = FormData.field.billStdG;
          delete FormData.field.billStdG;
          delete FormData.field.deptname;
          //提交
          febs.post(ctx + "baseflow/add", FormData.field, function () {
            layer.closeAll();
            febs.alert.success("新增流程成功");
            $("#febs-baseflow").find("#queryBaseFlow").click();
          });
        }
      }
      return false;
    });
    //点击新增按钮
    // $(".btn-add").click((res) => {
    $(".btn-add").click(function (res) {
      addFlag = true;
      console.log("add-clicks");
      $(".add-type").css("display", "flex");
      $(".btn-add").css("display", "none");
      $("#type").css("width", "100%");
      typeNoSelect.update({ disabled: true, data: [] });
      if ($(window).width() < 500) {
        $(".add-type").css("flex-direction", "column");
        $(".btn-cencel").css("width", "67%");
        $(".btn-cencel").css("margin-left", "108px");
        $(".type-margin").css("margin-bottom", "25px");
      }
    });
    //点击取消按钮
    // $(".btn-cencel").click((res) => {
    $(".btn-cencel").click(function (res) {
      addFlag = false;
      console.log("cencel-clicks");
      $(".add-type").css("display", "none");
      $(".btn-add").css("display", "block");
      $(".type-id-input").eq(0).val("");
      $(".type-name-input").eq(0).val("");
      $(".type-id-alert").text("");
      typeNoSelect.update({ disabled: false });
      if (orgId != null) {
        febs.get(ctx + "baseflow/getBillList?orgId=" + orgId + "&billstdNo=" + billStdNo, null, function (data) {
          typeNoSelect.update(data);
        });
      }
    });
    //type-id更改
    $(".type-id-input")
      .eq(0)
      // .change((res) => {
      //   if (res.delegateTarget.value == null) {
      //     return;
      //   }
      .change(function (res) {
        if (res.delegateTarget.value == null) {
          return;
        }
        febs.get(
          ctx + "baseflow/checkBill?orgId=" + orgId + "&billstdNo=" + billStdNo + "&basestdNo=" + res.delegateTarget.value,
          null,
          function (data) {
            if (res.delegateTarget.value == "") {
              $(".type-id-alert").text("");
              return;
            }
            switch (data.data) {
              case 1:
                $(".type-id-alert").text("该ID可以使用");
                $(".type-id-alert").css("color", "green");
                break;
              case 0:
                $(".type-id-alert").text("该ID已存在");
                $(".type-id-alert").css("color", "red");
                break;
            }
          }
        );
      });
    //监听机构菜单选择
    form.on("select(orgIdSelect)", function (data) {
      console.log("orgIdSelect", data);
      console.log("typeNoSelect", typeNoSelect);
      orgId = data.value;
      if (billStdNo == null) {
        return;
      }
      if (billStdNo == "DESTORY" || billStdNo == "DESTORY_Y") {
        febs.get(ctx + "baseflow/getNames?orgId=" + orgId, null, function (data) {
          deptXmlSelect.update(data);
        });
      } else {
        febs.get(ctx + "baseflow/getBillList?orgId=" + orgId + "&billstdNo=" + billStdNo, null, function (data) {
          typeNoSelect.update(data);
        });
      }
    });
    function getQueryParams(flag) {
      deptId = deptXmlSelect.getValue("valueStr");
      if (flag) {
        deptId = "";
      }
      let params = $searchForm.serializeJson();
      params.deptId = deptId;
      return params;
    }
  });
</script>
